<template>
  <div id="default-print" class="print">
    <h2>{{ instance.processDefName }}</h2>
    <div class="header">
      <div>{{ $t('webAuto.shengpiCode')}}：{{ instance.instanceId }}</div>
      <div>{{ $t('webAuto.SubmissionTime')}}：{{ instance.startTime }}</div>
    </div>
    <img class="result" v-if="status.img" :src="status.img" />
    <div class="qr-code">
      <div>{{ $t('webAuto.checkProcess')}}</div>
      <qrcode-vue ref="qrCode" :value="qrCode" :size="90" level="L" />
    </div>
    <div class="content">
      <table border="0">
        <tr>
          <th>{{ $t('webAuto.presenter')}}</th>
          <td colspan="5">{{ instance.staterUser.name }}</td>
        </tr>
        <tr>
          <th>{{ $t('webAuto.suozaiBM')}}</th>
          <td colspan="5">{{ instance.starterDept }}</td>
        </tr>
        <!--v-show="form.props.enablePrint"-->
        <template v-for="form in formItems" :key="form.id">
          <template v-if="form.title === '申请人'">
            <tr>
              <th>{{ $t('webAuto.fullName')}}</th>
              <td style="width:80px">
                <default-print-item :config="form" :data="instance.formData[form.id][0].name" />
              </td>
              <th style="width: 40px;">{{ $t('webAuto.workNumber')}}</th>
              <td style="width:80px"><default-print-item :config="form" :data="instance.formData[form.id][0].id" /></td>
              <th style="width: 40px;">{{ $t('webAuto.department')}}</th>
              <td><default-print-item :config="form" :data="instance.formData[form.id][0].deptName" />
              </td>
            </tr>
          </template>
          <template v-else>
            <tr>
              <th>{{ $t(form.title) }}</th>
              <td colspan="5">
                <default-print-item :config="form" :data="instance.formData[form.id]" />
              </td>
            </tr>
          </template>
        </template>
        <!-- <tr v-for="form in formItems" :key="form.id">
          <th>{{ form.title }}</th>
          <td>
            <default-print-item :config="form" :data="instance.formData[form.id]"/>
          </td>
        </tr> -->
        <tr>
          <th :rowspan="process.length + 1">{{ $t('webAuto.approvalPro')}}</th>
        </tr>
        <tr class="process-list" v-for="(task, i) in process" :key="i">
          <td colspan="5">
            <div class="base-info">
              <div>{{ task.userName }}</div>
              <div>{{ task.result }}</div>
              <div>{{ task.finishTime }}</div>
              <img class="sign" v-if="task.signature" :src="task.signature">
            </div>
            <div class="comment">{{ task.comment }}</div>
          </td>
        </tr>
        <tr>
          <th>{{ $t('webAuto.approvalRsl')}}</th>
          <td colspan="5">{{ status.text }}</td>
        </tr>
      </table>
    </div>
    <div class="footer">
      <div>{{ $t('webAuto.PrintingPerson')}}：{{ loginUser.name }}</div>
      <div>{{ $t('webAuto.printTime')}}：{{ moment().format('yyyy-MM-DD HH:mm:ss') }}</div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import DefaultPrintItem from './DefaultPrintFormItem.vue'
import QrcodeVue from "qrcode.vue";

export default {
  name: 'DefaultPrinter',
  components: { QrcodeVue, DefaultPrintItem },
  props: {
    instance: {
      required: true,
    },
    status: {
      required: true,
    },
  },
  computed: {
    loginUser() {
      return this.$store.state.loginUser
    },
    qrCode() {
      return `${window.location.origin}/#/mbInstance?instanceId=${this.instance.instanceId}`
    },
    process() {
      let userNodes = this.instance.progress.filter(
        (p) => p.nodeType === 'APPROVAL'
      )
      let userTask = []
      userNodes.forEach((un) => {
        if (Array.isArray(un.users)) {
          userTask.push(...un.users.map((u) => this.getTask(u)))
        } else {
          userTask.push(this.getTask(un))
        }
      })
      return userTask
    },
    formItems() {
      let result = []
      this.getItems(this.instance.formItems, result)
      return result
    },
  },
  data() {
    return {
      moment,
    }
  },
  methods: {
    getItems(items, collects) {
      items.forEach((item) => {
        if (item.name === 'SpanLayout') {
          this.getItems(item.props.items, collects)
        } else if (item.props.enablePrint) {
          collects.push(item)
        }
      })
    },
    getTask(item) {
      return {
        userName: item.user.name,
        result: this.getResult(item.result),
        signature: item.signature,
        finishTime: item.finishTime ? item.finishTime.substring(0, 16) : '----',
        comment: item.comment.length > 0 ? item.comment[0].text : '',
      }
    },
    getResult(res) {
      switch (res) {
        case 'agree':
          return this.$t('webAuto.Agreed')
        case 'complete':
          return this.$t('webAuto.AlreadyProcessed')
        case 'refuse':
          return this.$t('webAuto.REJECTED')
        case 'recall':
          return this.$t('webAuto.RETURNED')
        default:
          return '--'
      }
    },
  },
}
</script>

<style lang="less" scoped>
.print {
  font-family: 宋体;
  position: relative;

  .result {
    position: absolute;
    width: 100px;
    height: 100px;
    right: 100px;
    top: 10px;
  }

  .qr-code {
    position: absolute;
    text-align: center;
    top: 0;
    right: 0;
  }
}

h2 {
  text-align: center;
}

.header {
  font-size: 16px;
  margin-bottom: 20px;

  div {
    padding: 5px 0;
  }
}

table {
  font-size: 16px;
  width: 100%;
  border-collapse: collapse;
  padding: 2px;

  th {
    width: 30%;
  }
}

table tr th,
table tr td {
  text-align: left;
  border: 1px solid #464648;
  padding: 5px 10px;
}

.footer {
  font-size: 16px;
  margin-top: 20px;

  div {
    display: inline-block;
    width: 50%;
  }

  div:last-child {
    text-align: right;
  }
}

.process-list {
  .base-info {
    position: relative;

    &>div {
      position: absolute;
    }

    div:nth-child(3) {
      right: 0;
    }

    div:nth-child(2) {
      right: 200px;
    }

    .sign {
      position: absolute;
      left: 50px;
      width: 110px;
      height: 50px;
    }
  }

  .comment {
    margin-left: 10px;
    margin-top: 40px;
  }
}
</style>
